<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 100px;
			height: 100px;
			background-color: red;
			transition: all 1s 3s;
/*			过度 可以设置一个值过渡到另一个值 所需时间*/
/*			all 所有的 css 属性 都参与过渡*/
/*			1s 过渡所需时间*/
/*			3s 指的是延迟时间 等待时间*/

		}
		.box:hover{
			width: 500px;
			background-color: blue;
		}
		li{
			list-style: none;
/*			去除黑点*/
			width: 200px;
			height: 200px;
			background-color: orange;
			margin: 50px auto;
			transition: all 1s;
/*			transform: rotate(45deg);*/
/*			rorate 旋转  正值为顺时针 负值 为逆时针*/
/*			deg 度*/
		}
		li:nth-of-type(1):hover{
/*			transform-origin: right top;*/
/*			transform: rotatex(-45deg) rotatey(-45deg);*/
			transform: rotate3d(1, 1, 1, 45deg);
/*			第一个值代表 x 轴 0 代表不参与旋转 1 参与旋转*/
/*			第二个值代表 y 轴 0 代表不参与旋转 1 参与旋转*/
/*			第三个值代表 z 轴 0 代表不参与旋转 1 参与旋转*/
/*			第四个值代表 旋转多少度*/
		}
		li:nth-of-type(2):hover{
/*			位移*/
			transform: translate(50%,0);
/*			transform: translate(200px,100px);*/
/*			transform: translateZ(100px);*/
/*			transform: translate(x轴方向,y轴方向);*/
/*			translatex*/
/*			translatey*/
		}
		li:nth-of-type(3):hover{
/*			缩放*/
			transform: scale(0.6);
/*			正常比例 1.0 小于1 就是缩小 大于1 就是放大*/
		}
		li:nth-of-type(4):hover{
/*			transform: skew(X轴倾斜角度,Y轴倾斜角度);*/
			transform: skew(45deg,0);
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>